<template>
    <div class="bg">
        <div class="con">
            <div>
                <span>我的</span>
            </div>
        </div>
        <div class="user" @click="showUserInfo">
            <van-skeleton>
                <template #template>
                    <van-image round :src="avatar" class="avatar_img" />
                    <label class="account">{{ hidephone }}
                        <p class="nickname">昵称：{{ nickname }}</p>
                    </label>
                    <div>
                        <img src="/public/ring.png" alt="" class="ring">
                    </div>
                </template>
            </van-skeleton>
        </div>
        <div class="show_box">
            <div class="show_box_item">
                <span class="count">0</span>
                <p class="show_text">余额</p>
            </div>
            <div class="show_box_item">
                <span class="count">1</span>
                <p class="show_text">优惠券</p>
            </div>
            <div class="show_box_item">
                <span class="count">0</span>
                <p class="show_text">投诉记录</p>
            </div>
        </div>
        <div>
            <div @click="toOrders">
                <van-cell title="我的订单" is-link arrow-direction="right" class="myorder" />
            </div>
            <div class="schedule">
                <div>
                    <img src="/public/money_bag.png" alt="" class="schedule_img">
                    <p class="schedule_text">待付款</p>
                </div>
                <div>
                    <img src="/public/prograss.png" alt="" class="schedule_img">
                    <p class="schedule_text">进行中</p>
                </div>
                <div>
                    <img src="/public/done.png" alt="" class="schedule_img">
                    <p class="schedule_text">已完成</p>
                </div>
                <div>
                    <img src="/public/cancel.png" alt="" class="schedule_img">
                    <p class="schedule_text">已取消</p>
                </div>
            </div>
        </div>
        <div class="ad">
            <div>
                <span class="ad_title">代理商申请</span>
                <p class="ad_desc">申请成为代理商</p>
            </div>
            <img src="/public/horn.png" alt="" class="ad_img">
            <van-divider vertical class="my-vertical-divider" />
            <div>
                <span class="ad_title">推广赚钱</span>
                <p class="ad_desc">申请推广赚钱</p>
            </div>
            <img src="/public/database.png" alt="" class="ad_img">
        </div>
        <div>
            <div class="schedule1">
                <div @click="toManagePatient">
                    <img src="/public/managepatient.png" alt="" class="schedule_img">
                    <p class="schedule_text">就诊人管理</p>
                </div>
                <div>
                    <img src="/public/redpop.png" alt="" class="schedule_img">
                    <p class="schedule_text">分享好友</p>
                </div>
                <div @click="toEscort">
                    <img src="/public/medicine.png" alt="" class="schedule_img">
                    <p class="schedule_text">陪诊师入驻</p>
                </div>
                <div>
                    <img src="/public/1ad422b880f49a71505112ce1308ef6.png" alt="" class="schedule_img">
                    <p class="schedule_text">职务招聘</p>
                </div>
            </div>
            <div class="schedule2">
                <div>
                    <img src="/public/location.png" alt="" class="schedule_img">
                    <p class="schedule_text">地址管理</p>
                </div>
                <div>
                    <img src="/public/msg.png" alt="" class="schedule_img">
                    <p class="schedule_text">我的评分</p>
                </div>
                <div>
                    <img src="/public/pre_sell.png" alt="" class="schedule_img">
                    <p class="schedule_text">客服中心</p>
                </div>
                <div>
                    <img src="/public/blue_alert.png" alt="" class="schedule_img">
                    <p class="schedule_text">帮助中心</p>
                </div>
            </div>
            <div class="schedule3" @click="toEditPwd">
                <div>
                    <img src="/public/setting.png" alt="" class="schedule_img">
                    <p class="schedule_text">设置中心</p>
                </div>
            </div>
        </div>
        <div>
            <tabbar></tabbar>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/http';
import tabbar from '@/components/tabbar.vue';
const router = useRouter();
let phone = ref('')
let hidephone = ref('')
let nickname = ref('')
let avatar = ref('')

function showUserInfo() {
    router.push('/userinfo')
}

onMounted(() => {
    phone.value = localStorage.getItem('reginame')
    console.log("<<<<<<account", phone.value)
    hidephone.value = phone.value.slice(0, 3) + "****" + phone.value.slice(-4)
    http.get('/patient/register_login/', {
        params: {
            phone: phone.value,
        }
    })
        .then(response => {
            console.log('请求成功', response.data);
            nickname.value = response.data.nickname;
            avatar.value = response.data.avatar;
        })
        .catch(error => {
            console.error('请求失败', error);
        });
})

function toOrders() {
    router.push('/totalorder')
}

function toManagePatient() {
    router.push('/managepatient')
}
function toEscort() {
    router.push('/showescort')
}
function toEditPwd() {
    router.push('/setupcenter')
}

</script>
<style scoped>
.bg {
    height: 110vh;
    background: linear-gradient(180deg, #E1ECFE 0%, #F7F7F7 39.34%);
}

.con {
    text-align: center;
    padding-top: 5%;
}

.user {
    margin-top: 5%;
    margin-left: 5%;
}

.avatar_img {
    display: flex;
    margin-top: 5%;
    width: 50px;
    height: 50px;
}

.account {
    margin: 8% 5% 0;
}

.nickname {
    margin: 5px auto;
    font-size: 14px;
    color: #454545;
}

.ring {
    position: absolute;
    right: 5%;
    top: 13%;
}

.show_box {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 5% 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 80px;
}

.count {
    padding-top: 5%;
    font-weight: 700;
}

.show_text {
    margin: 0 auto;
    font-size: 12px;
    font-weight: 700;
}

.myorder {
    margin: 5% 5% 0;
    width: 90%;
    font-weight: 700;
    color: #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.arrow {
    font-weight: 700;
}

.schedule {
    background-color: white;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 60px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.schedule1 {
    background-color: white;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.schedule2 {
    background-color: white;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    height: 60px;
}

.schedule3 {
    background-color: white;
    margin: 0 5%;
    display: flex;
    align-items: center;
    text-align: left;
    height: 60px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.schedule3 div {
    margin-left: 7%;
    text-align: center;
}

.schedule_img {
    width: 20px;
}

.schedule_text {
    margin: 0;
    font-size: 12px;
}

.ad {
    background-color: white;
    margin: 2% 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    border-radius: 10px;
}


.ad_title {
    margin-top: 20px;
    font-weight: 800;
    font-size: 14px;
}


.ad_desc {
    margin: 0;
    font-size: 12px;
    color: rgb(193, 193, 193);
}

.ad_img {
    width: 30px;
}

.my-vertical-divider {
    height: 50px;
    background-color: #ccc;
}

</style>
<style>
.van-nav-bar__text {
    color: #000000;
}
</style>